/*
 * @Author: yangzonglong
 * @Date: 2021-05-14 10:17:55
 * @version: v1.0.0
 * @Descripttion: 选择设置 操作
 * @LastEditors: yangzonglong
 * @LastEditTime: 2021-05-14 14:25:35
 * @Auditor: 
 */
import React, { useState, useCallback, useEffect, useContext } from 'react';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import context from '../context';
import update from 'immutability-helper';
import ColumnItem from './ColumnItem';
import { createBpmnXMLNode, BPMN_NODE_TYPE, updateUserTask } from './../../../utils/bpmnUtils';
import { UserTaskSelfProps } from './../../../interface';
import style from './../style.module.scss';

const T = window.$app.t;

const data = [
  { action: '10', label: T('historyPass'), labelEn: 'Approve', buttonText: T('historyPass'), buttonTextEn: 'Approve', checked: false, shortcut: false, sort: '1' },
  { action: '20', label: T('historyRefuse'), labelEn: 'Reject', buttonText: T('historyRefuse'), buttonTextEn: 'Reject', checked: false, shortcut: false, sort: '2' },
  { action: '30', label: T('historyBack'), labelEn: 'Return', buttonText: T('historyBack'), buttonTextEn: 'Return', checked: false, shortcut: false, sort: '3' },
  { action: '40', label: T('historyConvert'), labelEn: 'Forward', buttonText: T('historyConvert'), buttonTextEn: 'Forward', checked: false, shortcut: false, sort: '4' },
  { action: '50', label: T('countersign'), labelEn: 'Counter Sign', buttonText: T('countersign'), buttonTextEn: 'Counter Sign', checked: false, shortcut: false, sort: '5' },
  { action: '110', label: T('resubmit'), labelEn: 'ReSubmit', buttonText: T('resubmit'), buttonTextEn: 'ReSubmit', checked: false, shortcut: false, sort: '6' },
];

export default () => {
  const { self, modeler } = useContext(context);
  const [stateData, setStateData] = useState(data);

  const _self = self as UserTaskSelfProps;

  useEffect(() => {
    const actions = _self.businessObject?.extensionElements?.values?.[0]?.values || [];
    const map = actions.reduce((next, cur) => {
      next[cur.action] = cur;
      return next;
    }, {});

    setStateData(data.map((item: any) => {
      if (map[item.action]) {

        return {
          ...item,
          shortcut: map[item.action].shortcut || item.shortcut,
          sort: map[item.action].sort || item.sort,
          buttonText: map[item.action].label || item.label,
          buttonTextEn: map[item.action].labelEn || item.labelEn,
          checked: true
        };
      }
      return item;
    }).sort((a, b) => a.sort - b.sort));
  }, [_self]);

  useEffect(() => {
    stateData.forEach((item, index) => {
      item.sort = index + '';
    });
    const updateData = Object.assign(createBpmnXMLNode(modeler, BPMN_NODE_TYPE.HL_ACTION_DATA), {
      values: stateData.filter(item => item.checked).map((item) => {
        let { action, buttonText, buttonTextEn, shortcut, sort } = item;
        return Object.assign(createBpmnXMLNode(modeler, BPMN_NODE_TYPE.HL_ACTION), { action, label: buttonText, labelEn: buttonTextEn, shortcut, sort });
      })
    });
    updateUserTask(modeler, _self, 0, updateData);
  }, [stateData, _self, modeler]);

  const change = useCallback(
    (index: number, k: string, v: string) => {
      setStateData(prev => prev.map((item, i) => {
        if (i === index) return { ...item, [k]: v };
        return item;
      }));
    },
    []
  );

  const move = useCallback(
    (draggedId: string, hoverId: string) => {
      let draggedIndex: number = 0,
        hoverIndex: number = 0;

      stateData.forEach((item, index) => {
        if (item.action === draggedId) draggedIndex = index;
        if (item.action === hoverId) hoverIndex = index;
      });

      setStateData(update(stateData, {
        $splice: [
          [draggedIndex, 1],
          [hoverIndex, 0, stateData[draggedIndex]],
        ],
      }));
    },
    [stateData]
  );

  return (
    <DndProvider backend={HTML5Backend}>
      <ul className={style.actionSet}>
        {stateData.map((item, index) => (
          <ColumnItem key={item.action} originalIndex={index} item={item} change={change} move={move} />
        ))}
      </ul></DndProvider>
  );
};
